<template>
  <div class="op-container">
    <div class="filter-container">
      <span v-if="authorityHandle(192)" class="filter-title filter-item">身份所属</span>
      <k-select
        v-if="authorityHandle(192)"
        v-model="listQuery.userType"
        style="width:100px"
        class="filter-item right-item"
        :select-params="typeList"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">注销状态</span>
      <k-select
        v-model="listQuery.cancelStatus"
        style="width:120px"
        class="filter-item user-status"
        :select-params="[{label:'注销中',value: 1}, {label:'已注销',value: 2}, {label:'已取消',value: 3}]"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">注册时间</span>
      <k-date-picker v-model="timeValue" class="filter-item right-item" @hqchang="handleFilter" />
      <span class="filter-title filter-item">提交时间</span>
      <k-date-picker v-model="timeValueGet" class="filter-item" @hqchang="handleFilter" />
      <k-input
        v-model.trim="listQuery.key"
        class="filter-item"
        is-search
        placeholder="请输入关键词"
        :search-fun="handleFilter"
        @keyup.enter.native="handleFilter"
      />
    </div>

    <k-button class="top-btn" value="注销协议" @click.native="ruleGuideDialog" />

    <!--表格相关 -->
    <el-table
      :data="listData"
      fit
      border
      highlight-current-row
      style="width: 100%;border-radius:8px;"
      :header-cell-style="{background:'#F6F5FA',color:'#4E4F62'}"
    >
      <el-table-column prop="userNickName" min-width="100px" label="昵称" align="center" />
      <el-table-column prop="userMobile" min-width="120px" label="绑定手机号" align="center" />
      <el-table-column prop="belongName" min-width="180px" label="身份所属" align="center" />
      <el-table-column prop="userRechargeTotal" min-width="100px" label="消费总额" align="center" />
      <el-table-column
        v-if="authorityHandle(192)"
        prop="userDrawTotal"
        min-width="100px"
        label="提取总额"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column prop="userCreateTime" min-width="150px" label="注册时间" align="center" />
      <el-table-column prop="cancelMsg" min-width="130px" label="注销原因" show-overflow-tooltip align="center" />
      <el-table-column prop="cancelTime" min-width="150px" label="提交时间" align="center" />
      <el-table-column prop="cancelStatus" min-width="130px" label="注销状态" align="center">
        <template slot-scope="scope">
          {{ scope.row.cancelStatus | cancellation }}
        </template>
      </el-table-column>

      <el-table-column v-if="authorityHandle(192)" prop="userSescribe" min-width="120px" label="备注" align="center">
        <!-- :toolTipContent="row.userSescribe" -->
        <editable-cell
          v-model="row.userSescribe"
          slot-scope="{row}"
          :tool-tip-content="row.userSescribe ? row.userSescribe : '点击编辑,编辑完成回车'"
          :show-input="row.editMode"
          @blur="blurInput(row)"
          @keyup.enter.native="$event.target.blur()"
        >
          <span
            slot="content"
            style="
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            "
          >{{ row.userSescribe }}</span>
        </editable-cell>
      </el-table-column>

      <el-table-column v-else prop="userSescribe" min-width="120px" label="备注" align="center" show-overflow-tooltip />

      <el-table-column min-width="130px" label="再次注册" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.allowReg"
            active-color="#3b425d"
            inactive-color="#E9EBF2"
            active-text="允许"
            inactive-text="禁止"
            :active-value="1"
            :inactive-value="2"
            :disabled="!authorityHandle(192)"
            @change="updateTimingStatus($event,scope)"
          />
        </template>
      </el-table-column>

      <el-table-column min-width="150px" fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <div class="op-div">
            <k-button class="table-btn" value="修改/详情" @click.native="userUpdateDialog(scope.row)" />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />

    <!-- 修改、详情 弹窗 -->
    <k-dialog
      :show-hide.sync="modifyDialog.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="修改/详情"
      :show-foot="false"
      :two-btn="false"
      @click="updateUserData"
    >
      <el-form :model="userinfo" label-width="auto" class="form-modify">
        <div class="modify-left">
          <el-form-item label="昵称：">
            <el-input v-model="userinfo.userNickName" readonly />
          </el-form-item>
          <el-form-item label="绑定手机号：">
            <el-input v-model="userinfo.userMobile" readonly onkeyup="value=value.replace(/[^0-9.]/g,'')" />
          </el-form-item>

          <el-form-item label="用户等级：">
            <el-input v-model="userinfo.userLevel" readonly />
          </el-form-item>

          <el-form-item label="用户等级值：">
            <el-input v-model="userinfo.userUpdateRechargeTotal" readonly />
          </el-form-item>

          <el-form-item label="绑定邮箱：">
            <el-input v-model="userinfo.userEmail" readonly />
          </el-form-item>
          <el-form-item label="绑定 Steam：">
            <el-input v-model="userinfo.userSteamId" readonly />
          </el-form-item>
          <el-form-item label="交易链接：">
            <el-input v-model="userinfo.userSteamUrl" readonly />
          </el-form-item>

          <el-form-item label="身份所属：">
            <el-input v-model="userinfo.belongName" readonly />
          </el-form-item>

          <el-form-item label="邀请码：">
            <el-input v-model="userinfo.userInvitationCode" readonly />
          </el-form-item>

          <el-form-item label="自己邀请码：" prop="owninvitecode">
            <el-input v-model="userinfo.userOwnerInvitation" readonly />
          </el-form-item>
          <!-- 用户字典 -->
          <el-form-item v-if="authorityHandle(1)" label="用户通道：">
            <el-select v-model="userinfo.userCaseProbability">
              <el-option
                v-for="item in dict.type.USER_CHANNEL"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

        </div>
        <div class="modify-right">
          <el-form-item label="真实姓名：">
            <el-input v-model="userinfo.userName" readonly />
          </el-form-item>
          <el-form-item label="身份证号：">
            <el-input v-model="userinfo.userIdNumber" readonly />
          </el-form-item>

          <el-form-item label="账号余额：">
            <div class="account_balance">
              <el-input v-model="userinfo.userAccountBalance" readonly />
            </div>
          </el-form-item>

          <el-form-item label="饰品余额：">
            <div class="account_balance">
              <el-input v-model="userinfo.userRucksackTotal" readonly />
            </div>
          </el-form-item>

          <el-form-item label="晶粹数量：">
            <div class="account_balance">
              <el-input v-model="userinfo.userAmmoBalance" readonly />
            </div>
          </el-form-item>
          <el-form-item label="积分数量：">
            <div class="account_balance">
              <el-input v-model="userinfo.userPointBalance" readonly />
            </div>
          </el-form-item>

          <el-form-item label="未开奖roll房：">
            <div class="account_balance">
              <el-tooltip class="item" effect="dark" :content="userinfo.userRollMsg" placement="top">
                <el-input v-model="userinfo.userRollMsg" readonly />
              </el-tooltip>
            </div>
          </el-form-item>

          <el-form-item label="推广盲盒：">
            <div class="account_balance">
              <el-input v-model="userinfo.userFissionBoxCount" readonly />
            </div>
          </el-form-item>

          <el-form-item label="推广分红：">
            <div class="account_balance">
              <el-input v-model="userinfo.userFissionTotal" readonly />
            </div>
          </el-form-item>

          <el-form-item label="礼品余额：">
            <div class="account_balance">
              <el-input v-model="userinfo.userTaskTotal" readonly />
            </div>
          </el-form-item>

          <el-form-item label="注销原因：">
            <div class="account_balance">
              <el-tooltip class="item" effect="dark" :content="userinfo.cancelMsg" placement="top">
                <el-input v-model="userinfo.cancelMsg" readonly />
              </el-tooltip>
            </div>
          </el-form-item>

        </div>
      </el-form>
    </k-dialog>

    <!-- 玩法介绍 弹窗 -->
    <k-dialog
      :show-hide.sync="ruleGuide.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="注销协议"
      class-name="ruleGuide-dialog"
      :show-foot="false"
      :two-btn="authorityHandle(192)"
      @click="guideSave"
    >
      <div class="dialog-ruleGuide" style="padding:30px">
        <el-form :model="ruleGuideContent" label-width="auto">
          <el-form-item label="内容介绍：" prop="content">
            <quill-editor
              ref="myQuillEditor"
              v-model.trim="ruleGuideContent.content"
              :options="editorOption"
              class="editer"
            />
          </el-form-item>
        </el-form>
      </div>
    </k-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import EditableCell from '@/components/EditableCell'

import {
  cancelUserListData,
  cancelUserUpdateStatus,
  updateRemark,
  getCanceAgreement,
  setCanceAgreement
} from '@/api/user/user'

export default {
  components: {
    Pagination,
    EditableCell
  },

  filters: {
    identity(v) {
      if (v == 1) {
        return '官方'
      } else if (v == 2) {
        return '主播'
      } else if (v == 3) {
        return '玩家'
      }
    },

    cancellation(v) {
      if (v == 1) {
        return '注销中'
      } else if (v == 2) {
        return '已注销'
      } else if (v == 3) {
        return '已取消'
      }
    }

  },
  dicts: ['USER_CHANNEL'],
  data() {
    return {
      typeList: [{
        label: '官方',
        value: 1
      }, {
        label: '主播',
        value: 2
      }, {
        label: '玩家',
        value: 3
      }],
      listData: [],
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: '',
          startTime: ''
        },
        startTime: '', // 用户创建时间
        endTime: '', // 结束时间
        cancelStartTime: '', // 提交时间
        cancelEndTime: '', // 提交结束时间
        userType: '', // 用户类型 1官网 2主笔 3玩家
        cancelStatus: '', // 注销状态 1注销中|2已注销|3已取消
        key: '' // 搜索
      },
      probilityModle: undefined,
      userinfo: {},

      timeValue: '',
      timeValueGet: '',
      identityBelong: '',

      modifyDialog: {
        showHide: false
      },

      ruleGuide: {
        showHide: false
      },
      ruleGuideContent: {
        content: ''
      },
      editorOption: { //  富文本编辑器配置
        placeholder: '请输入内容',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], // 引用，代码块
            [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
            [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
            [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
            [{ 'direction': 'rtl' }], // 文本方向
            [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 几级标题
            [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
            [{ 'font': [] }], // 字体
            [{ 'align': [] }], // 对齐方式
            ['clean'], // 清除字体样式
            ['image'] // 上传图片、上传视频
          ]
        }
      }
    }
  },
  watch: {
    identityBelong(val) {
      this.$log(val)
      this.listQuery.identityBelong = this.identityBelong
      if (val) {
        this.getByIdentityBelong(val)
      }
    },
    // 时间赋值
    timeValue(val) {
      this.listQuery.startTime = this.timeValue ? this.timeValue[0] : null
      this.listQuery.endTime = this.timeValue ? this.timeValue[1] : null
    },

    timeValueGet(val) {
      this.listQuery.cancelStartTime = this.timeValueGet ? this.timeValueGet[0] : null
      this.listQuery.cancelEndTime = this.timeValueGet ? this.timeValueGet[1] : null
    }
  },

  created() {
    if (this.authorityHandle(188, 189, 190, false)) {
      this.typeList = [{
        label: '主播',
        value: 2
      }]
    }
    this.loadData()
  },

  methods: {
    ruleGuideDialog() {
      getCanceAgreement().then(res => {
        this.ruleGuideContent.content = res.data.data.content
        this.ruleGuide.showHide = true
      })
    },

    // 保存玩法管理
    guideSave() {
      const contents = this.ruleGuideContent.content
      setCanceAgreement({ 'content': contents }).then(res => {
        this.ruleGuide.showHide = false
      })
    },

    loadData(val) {
      cancelUserListData(this.listQuery).then(res => {
        const data = res.data
        // this.listData = data.rows
        this.totalRows = data.totalRows
        if (data.rows) {
          this.listData = data.rows.map(row => {
            return {
              ...row,
              editMode: false
            }
          })
        } else {
          this.listData = []
        }
      })
    },

    // 状态
    updateTimingStatus(event, scope) {
      cancelUserUpdateStatus({
        'id': scope.row.id,
        'allowReg': scope.row.allowReg
      }).then(res => {
        if (res.data.success) {
          this.$message.success('操作成功')
        } else {
          this.$message.success(res.data.msg)
        }
      })
    },

    // 修改用户信息
    updateUserData() {
      this.modifyDialog.showHide = false
    },

    // 搜索查询事件
    handleFilter() {
      this.listQuery.pager.pageNo = 1
      this.loadData()
    },

    userUpdateDialog(row) {
      this.userinfo = row
      this.modifyDialog.showHide = true
    },

    blurInput(row) {
      this.modifyItemNote(row)
    },
    // 修改备注
    modifyItemNote(row) {
      // if (!row.describe) return
      updateRemark({
        userId: row.userId,
        userDescribe: row.userSescribe
      }).then(res => {
        if (res.data.success) {
          this.$message.success('备注成功')
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }
  }

}
</script>
<style lang="scss" scoped>
	$menuText:#14162E; // 侧边栏字体颜色
	$hoverColor:#1D143C; // 鼠标停留主色调浅色
	$mainColor:#3b425d; // 主色调

	.op-container {
		margin: 20px;
	}

.editer {
  width: 500px;
  border-radius: 8px;
  float: left;
  box-sizing: border-box;
  color: #606266;
  ::v-deep .ql-container {
    height: 270px;
    border-radius: 0px 0px 8px 8px;
  }
  ::v-deep .ql-toolbar.ql-snow {
    border-radius: 8px 8px 0px 0px;
  }
}

	.filter-container {
		width: 100%;
		height: 48px;
		line-height: 48px;

		.filter-item {
			display: inline-block;
			vertical-align: middle;
			margin-bottom: 10px;
		}

		.right-item {
			margin-right: 10px;
		}

		.kInput {
			position: absolute;
			right: 10px;
		}

		.filter-title {
			height: 48px;
			line-height: 48px;
			font-size: 16px;
			font-weight: 500;
			margin-right: 6px;
			color: #14162E;
		}

		.user-item {
			margin-left: 10px;
			margin-right: 20px;
		}

		.user-status,
		.account-status {
			margin-right: 20px;
		}
	}

	.top-btn {
		margin: 30px 0px 30px 0px;
		font-size: 14px;
		color: #ffffff;
	}

	.balance_btn {
		margin: 0px 10px;
		font-size: 14px;
		color: #ffffff;
	}

	.account_balance {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.top-radio-group {
		margin-bottom: 40px;
		transform: translateY(-20px);
	}

	::v-deep .el-radio-button__inner {
		&:hover {
			color: $mainColor;
		}
	}

	.supervise-container {
		min-width: 1320px;
		min-height: 300px;

		.percentage_box {
			width: 100%;
			height: 100%;
			overflow: hidden;

			p {
				text-align: center;
				font-size: 16px;
				margin-top: 40px;
			}

			.el-input {
				width: 80px;
				margin: 0 6px;
			}
		}

		.allocation_box {
			width: 100%;
			text-align: center;
			transform: translateY(-20px);
			padding: 0 20px;
			box-sizing: border-box;

			.allocation_main {
				display: flex;
				justify-content: space-between;

				.title {
					font-size: 20px;
					text-align: center;
					margin-bottom: 20px;
				}

				.allocation_left {
					height: 100%;
					width: 600px;
					border-right: 2px solid #606266;
					padding-right: 50px;
					box-sizing: border-box;

					.section_list {
						.section_item {
							display: flex;
							align-items: center;
							padding: 10px 20px;
							box-sizing: border-box;
							border: 1px solid transparent;
							border-radius: 6px;
							cursor: pointer;

							span {
								font-size: 16px;
							}

							.el-input {
								width: 140px;
								margin: 0 20px;
							}

							i {
								font-size: 18px;
								cursor: pointer;
							}

							&.active {
								border-color: rgb(54, 181, 139);
							}
						}

					}

					.addItem {
						text-align: center;
						margin-top: 20px;

						i {
							font-size: 22px;
							color: rgb(54, 181, 139);
							cursor: pointer;
						}
					}

				}

				.allocation_right {
					height: 100%;
					width: 640px;

					.enter_list {
						.enter_item {
							display: flex;
							align-items: center;
							margin-bottom: 20px;

							span {
								font-size: 16px;
							}

							.el-input {
								width: 120px;
								margin: 0 6px;
							}

							.item {
								margin: 0 10px;

								.el-select {
									width: 120px;
									margin: 0 6px;
								}
							}

							i {
								font-size: 18px;
								cursor: pointer;
							}
						}
					}

					.addItem {
						text-align: center;
						margin-top: 20px;

						i {
							font-size: 22px;
							color: rgb(54, 181, 139);
							cursor: pointer;
						}
					}

				}
			}

			li {
				list-style: none;
				display: block;
				display: flex;
				align-items: center;
				margin-bottom: 20px;

				.allocation_item {
					margin-right: 30px;

					::v-deep input::-webkit-outer-spin-button,
					::v-deep input::-webkit-inner-spin-button {
						-webkit-appearance: none;
					}

					::v-deep input[type="number"] {
						-moz-appearance: textfield;
					}
				}

				.el-input {
					width: 80px;
					margin: 0 6px;
				}

				.el-select {
					width: 124px;
					margin-left: 6px;
				}

				.el-icon {

					&-circle-plus,
					&-remove {
						font-size: 22px;
						color: #3b425d;
						margin-left: 10px;
					}
				}
			}
		}
	}

	.kSelect .el-select .el-input .el-input__inner {
		width: 124px;
	}

	::v-deep .el-select .el-input.is-focus .el-input__inner {
		border-color: $mainColor;
	}

	::v-deep .el-input__inner:focus {
		border-color: $mainColor;
	}

	.el-form-item__label-wrap .el-form-item__label {
		float: none;
	}

	.dialog-openboxsetting {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 80px 80px;
	}

	.form-modify {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 10px 80px;

		.modify-right {
			margin-left: 80px;
		}
	}

	.table-btn {
		width: 80px;
		height: 35px;
		line-height: 35px;
		padding: 0;
		background: #e7ecf8;
		border: 1px solid $mainColor;
		border-radius: 8px;
		font-size: 14px;
		color: $mainColor;

		&:hover {
			background: $mainColor;
			color: #fff;
		}

		&:focus {
			background-color: #e7ecf8;
		}
	}

	.dialog-warningSetting {
		::v-deep.el-input {
			width: 150px;
		}

		.price-input {
			width: 110px;
		}

		.el-icon {

			&-circle-plus,
			&-remove {
				font-size: 22px;
				color: #3b425d;
				margin-left: 10px;
			}
		}

		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;

			li {
				margin: 0 0 30px 0px;
				display: flex;
				flex-direction: row;
				align-items: center;

				.warning-title {
					font-size: 16px;
					color: $menuText;
					margin-right: 10px;
					margin-left: 20px;
				}

				i {
					color: #D1D5DD;
				}
			}
		}
	}

	.kol-router {
		color: #3b425d;
		font-size: 14px;
	}

	.avatardiv {
		width: 50px;
		height: 50px;
		position: relative;

		.image1 {
			position: absolute;
			top: 0;
			left: 0;
			width: 50px;
			height: 50px;
		}

		.image2 {
			z-index: 10;
		}
	}
</style>
